*{ margin: 0; 
    padding: 0;}

/* 清除浮动 */
.clearfix::after{
    content: '';
    height: 0;
    display: block;
    clear: both;
}

.fr{
    float: right;
}

.fl{
    float: left;
}
/* container */
.container{ width:1200px;
     padding: 100px; 
     height: 7000px; 
     background-color: #ccc; 
     margin: 0 auto;}

/* 在线 */
.online{ 
    width: 50px; 
    height: 200px; 
    position: fixed;
    left: 50%; 
    margin-left: 640px; 
    top: 50%; 
    margin-top: -100px;
}

.online a{ display: block;
    position: relative; 
    width: 50px; 
    height: 50px; 
    background: url('../imgs/bg.png') no-repeat;}
.online a:nth-child(2){ background-position-y: -50px; }
.online a:nth-child(3){ background-position-y: -100px;}
.online a:nth-child(4){ background-position-y: -150px; 
    display: none;}

.online a span{ 
    position: absolute; 
    width: 150px; height: 50px; 
    background-color: #007bf9;
    color: #fff; 
    line-height: 50px; 
    text-align: center;
     left: -150px; 
     display: none;
}

/* 选项卡 */
.tab{ width: 400px; 
    height: 400px; 
    background-color: royalblue; 
    margin: 0 auto;}
.tab-menu{ height: 50px;}
.tab-menu li{ 
    list-style: none; 
    float: left; 
    width: 100px; 
    line-height: 50px; 
    text-align: center; 
    color: #fff; 
    background-color: saddlebrown;
}
.tab-menu .active{
     background-color: slateblue;}

.tab-cont p{ display: none; 
    height: 350px; 
    background-color: teal; 
    font-size: 100px; 
    line-height: 350px; 
    text-align: center; 
    color: #fff;}
.tab-cont .on{ display: block}

body{
position: relative;
}

/* 表头 */
.title{
height: 50px;
width: 100%;
line-height: 50px;
text-align: center;
background-color: black;
color: white;
position: absolute;
top: 0;
left: 0;
}

.btn{
    margin-left: 25px;
    margin-right: 20px;
    cursor: pointer;
}


/* 蒙层  */
body,
html {
    height: 100%;
}


.box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    font-display: none;
}

.modal {
    width: 300px;
    height: 400px;
    background-color: #fff;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.hideBtn{
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: silver;
    float: right;
    cursor: pointer;
}

/* login */
.login h2{ text-align: center; 
    padding: 40px }

.login p{ padding: 20px;
     position: relative;}
.login input, .login button{ 
    padding: 0 10px; 
    box-sizing: border-box; 
    width: 100%; 
    line-height: 30px; 
    border: 1px solid #ccc; 
    outline: none; 
    border-radius: 5px;}
.login button{ 
    background-color: #007bf9;
     color: #fff; 
     letter-spacing: 10px ;}

.login .del-btn, .login .eyes{
    display: none; 
    width: 20px; 
    position: absolute; 
    right: 30px; 
    top: 25px;}

.msg{
    font-size: 12px;
    color: red;
    position: absolute;
    top:55px;
    left: 20px;
}